<template>
  <div>
    <tableComponents
      :isHavePagination="false"
      :isShow="false"
      :isHaveExport="false"
      @toAdd="add_reward"
    >
      <template v-slot:table>
        <el-table
          ref="multipleTable"
          :data="reward_list"
          v-loading="loading"
          element-loading-text="拼命加载中"
          stripe
          header-row-class-name="head_color"
          tooltip-effect="dark"
          style="width: 99.8%"
        >
          <el-table-column min-width="50" label="序号" type="index" width="80"></el-table-column>
          <!-- <el-table-column label="id" min-width="120">
            <template slot-scope="scope">{{scope.row.id }}</template>
          </el-table-column> -->
          <el-table-column label="金额" min-width="200">
            <template slot-scope="scope">{{$fnc.toFixedZ(scope.row.reward) }}</template>
          </el-table-column>

          <el-table-column label="手续费百分比" min-width="200">
            <template slot-scope="scope">{{$fnc.toFixedZ(scope.row.fee) }}%</template>
          </el-table-column>

          <!-- <el-table-column label="创建时间" min-width="200">
            <template slot-scope="scope">{{scope.row.created_time |getTimeFormat }}</template>
          </el-table-column> -->

          <el-table-column label="修改时间" min-width="200">
            <template slot-scope="scope">{{scope.row.update_time |getTimeFormat }}</template>
          </el-table-column>

          <el-table-column label="操作" min-width="150">
            <template slot-scope="scope">
              <el-button
                :loading="$store.state.isLoading"
                size="mini"
                type="primary"
                @click="update_reward(scope.row.id )"
              >编辑</el-button>
              <el-button
                :loading="$store.state.isLoading"
                size="mini"
                type="danger"
                @click="delete_reward( scope.row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </tableComponents>

    <el-dialog
      :close-on-click-modal="false"
      title="添加奖励设置"
      v-loading="dioLoading"
      class="tl size_13"
      width="800px"
      :visible.sync="dialogaddVisible">
      <el-form :model="add_form" ref="form" label-width="120px">
        <el-form-item label="金额：" :label-width="formLabelWidth">
          <el-col :span="12">
            <el-input
              type="text"
              :rows="6"
              clearable
              placeholder="请输入"
              v-model="add_form.reward"
              autocomplete="off"
            ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="手续费：" :label-width="formLabelWidth">
          <el-col :span="12">
            <el-input
              type="text"
              :rows="6"
              clearable
              placeholder="请输入"
              v-model="add_form.fee"
              autocomplete="off"
            ></el-input>
          </el-col>

          <span>%</span>
        </el-form-item>

        <el-form-item>
          <el-button :loading="$store.state.isLoading" type="primary" @click="add_submit()">添 加</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      title="编辑奖励设置"
      v-loading="dioLoading"
      class="tl size_13"
      width="800px"
      :visible.sync="dialogFormVisible">
      <el-form :model="reward_single" ref="form" label-width="120px">
        <el-form-item label="id：" :label-width="formLabelWidth">
          <el-col :span="12">
            <el-input
              type="text"
              :rows="6"
              clearable
              placeholder="请输入"
              disabled="disabled"
              v-model="reward_single.id"
              autocomplete="off"
            ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="金额：" :label-width="formLabelWidth">
          <el-col :span="12">
            <el-input
              type="text"
              :rows="6"
              clearable
              placeholder="请输入"
              v-model="reward_single.reward"
              autocomplete="off"
            ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="手续费：" :label-width="formLabelWidth">
          <el-col :span="12">
            <el-input
              type="text"
              :rows="6"
              clearable
              placeholder="请输入"
              v-model="reward_single.fee"
              autocomplete="off"
            ></el-input>
          </el-col>
          <span>%</span>
        </el-form-item>
        <el-form-item>
          <el-button :loading="$store.state.isLoading" type="primary" @click="saveForm()">编 辑</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import HeadTitle from "@/components/currency/HeadTitle.vue";

export default {
  name: "reward",
  data() {
    return {
      add_form: {
        reward: "",
        fee: ""
      },

      reward_single: {
        id: "",
        reward: "",
        fee: ""
      },
      dialogaddVisible: false,
      dialogFormVisible: false,
      dioLoading: false,
      reward_list: [],
      loading: false,
      formLabelWidth: "120px"
    };
  },
  components: {
    HeadTitle
  },
  created() {
    this.get_reward_list();
  },
  methods: {
    add_submit() {
      var params = this.add_form;
      this.$api.getPage.add_platoon_reward(params).then(res => {
        if (res.data.code == 200) {
          this.$fnc.alertSuccess("添加成功");
          this.dialogaddVisible = false;
          this.get_reward_list();
        } else {
          this.$fnc.alertError(res.data.result);
          this.get_reward_list();
        }
      });
    },
    add_reward() {
      this.add_form = {
        reward: "",
        fee: ""
      };
      this.edit_flag = true;
      this.dialogaddVisible = true;
    },
    saveForm() {
      var params = {};
      params.id = this.reward_single.id;
      params.reward = this.reward_single.reward;
      params.fee = this.reward_single.fee;
      this.$api.getPage.save_platoon_reward(params).then(res => {
        if (res.data.code == 200) {
          this.$fnc.alertSuccess("修改成功");
          this.dialogFormVisible = false;
          this.get_reward_list();
        } else {
          this.$fnc.alertError(res.data.result);
          this.get_reward_list();
        }
      });
    },
    delete_reward(id) {
      //删除
      this.$swal({
        title: "您确定要删除这些信息吗",
        text: "删除后将无法恢复，请谨慎操作！",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "是的，我要删除",
        cancelButtonText: "容我三思"
      }).then(willDelete => {
        if (willDelete.value) {
          this.$api.getPage.del_platoon_reward({ id: id }).then(res => {
            if (res.data.code == 200) {
              this.$swal("删除成功！", "您已经删除了这条信息。", "success");
              this.get_reward_list();
            } else {
              this.$swal("删除失败！", "出错啦！", "success");
              this.get_reward_list();
            }
          });
        }
      });
    },
    update_reward(id) {
      //修改页面
      //   this.showImg = true;
      this.edit_flag = true;
      this.dialogFormVisible = true;
      this.$api.getPage.get_single_platoon_reward({ id: id }).then(res => {
        if (res.data.code == 200) {
          res.data.result.reward = this.$fnc.toFixedZ(res.data.result.reward);
          res.data.result.fee = this.$fnc.toFixedZ(res.data.result.fee);
          this.reward_single = res.data.result;
        }
      });
    },

    get_reward_list(data) {
      this.loading = true;
      var params = {};
      data = data || {};
      params = data;
      this.$api.getPage.get_platoon_reward(params).then(res => {
        if (res.data.code == 200) {
          this.reward_list = res.data.result;
          this.loading = false;
        } else {
          this.$fnc.alerterror(res.data.result);
          this.loading = false;
        }
      });
    }
  }
};
</script>
<style scoped>
</style>
